<template>
  <popup ref="refPopup" :noClose="false" @event="isVip && $refs.refOpenVip.clearCallback()">
    <open-vip ref="refOpenVip" @event="returnEvent" v-if="isVip"></open-vip>
    <div class="overdue-vip" v-else>
      <h3>⚠️注意⚠️</h3>
      <p>您的VIP体验权限已到期，请开通VIP以使用全部功能。</p>
      <span @click="bindVip">开通VIP</span>
    </div>
  </popup>
</template>
<script>
import openVip from '~/components/slot/openVip'
export default {
  data () {
    return {
      isVip: !1
    }
  },
  components: {
    openVip
  },
  methods: {
    init (msg = true) {
      // 打开弹窗
      this.$refs.refPopup.init(msg)
      this.isVip = !1
    },
    bindVip () {
      this.isVip = !0
      this.$nextTick(() => {
        this.$refs.refOpenVip.init()
      })
    },
    returnEvent () {
      // 激活VIP后返回关闭窗口
      this.$refs.refPopup.init(false)
      // 进入这里一定是激活了VIP，进行首页数据刷新
      this.$emit('event')
    }
  }
}
</script>
<style scoped lang="scss">
  .overdue-vip{
    width: 310px; height: 330px;
    background: $light;
    border-radius:10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px;
    h3{
      font-weight: normal;
      font-size: 20px;
      margin-bottom: 35px;
    }
    p{
      color: #69707F;
      line-height: 22px;
      font-size: 16px;
      margin-bottom: 70px;
    }
    span{
      height: 50px; line-height:50px;
      width: 100%; text-align:center;
      font-size: 16px;
      color: $light;
      background: $pink;
      border-radius: 10px;
      cursor: pointer;
    }
  }
</style>
